<template>
  <div class="feedback-manage-container">
    <div class="page-header">
      <h2>留言反馈管理</h2>
      <el-button type="primary" @click="fetchAllFeedbacks">刷新数据</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table 
      :data="feedbackList" 
      style="width: 100%" 
      border 
      v-loading="loading"
      stripe
    >
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="username" label="用户名" width="120" />
      <el-table-column prop="content" label="反馈内容" min-width="200" show-overflow-tooltip />
      <el-table-column prop="contactInfo" label="联系方式" width="150" show-overflow-tooltip />
      <el-table-column prop="createTime" label="提交时间" width="160" />
      <el-table-column label="状态" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 1" type="success">已回复</el-tag>
          <el-tag v-else type="info">待处理</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button 
            type="primary" 
            size="small" 
            @click="showReplyDialog(scope.row)"
            :disabled="scope.row.status === 1"
          >
            {{ scope.row.status === 1 ? '已回复' : '回复' }}
          </el-button>
          <el-button 
            type="primary" 
            size="small" 
            @click="viewFeedbackDetail(scope.row)"
            text
          >
            查看
          </el-button>
          <el-popconfirm
            title="确定要删除此条留言吗？"
            @confirm="deleteFeedback(scope.row.id)"
          >
            <template #reference>
              <el-button type="danger" size="small" text>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 回复对话框 -->
    <el-dialog
      v-model="replyDialogVisible"
      title="回复留言"
      width="50%"
    >
      <div class="feedback-detail">
        <div class="detail-item">
          <span class="label">用户名：</span>
          <span>{{ currentFeedback.username }}</span>
        </div>
        <div class="detail-item">
          <span class="label">联系方式：</span>
          <span>{{ currentFeedback.contactInfo || '未提供' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">提交时间：</span>
          <span>{{ currentFeedback.createTime }}</span>
        </div>
        <div class="detail-item">
          <span class="label">反馈内容：</span>
          <div class="content">{{ currentFeedback.content }}</div>
        </div>
      </div>

      <el-form :model="replyForm" :rules="replyRules" ref="replyFormRef">
        <el-form-item label="回复内容" prop="reply">
          <el-input 
            type="textarea" 
            v-model="replyForm.reply" 
            :rows="4" 
            placeholder="请输入回复内容..."
          ></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="replyDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitReply" :loading="submitting">提交回复</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="留言详情"
      width="50%"
    >
      <div class="feedback-detail">
        <div class="detail-item">
          <span class="label">用户名：</span>
          <span>{{ currentFeedback.username }}</span>
        </div>
        <div class="detail-item">
          <span class="label">联系方式：</span>
          <span>{{ currentFeedback.contactInfo || '未提供' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">提交时间：</span>
          <span>{{ currentFeedback.createTime }}</span>
        </div>
        <div class="detail-item">
          <span class="label">反馈内容：</span>
          <div class="content">{{ currentFeedback.content }}</div>
        </div>

        <!-- 显示回复内容（如果已回复） -->
        <template v-if="currentFeedback.status === 1">
          <div class="reply-section">
            <h4>回复信息</h4>
            <div class="detail-item">
              <span class="label">回复人：</span>
              <span>{{ currentFeedback.replyUsername }}</span>
            </div>
            <div class="detail-item">
              <span class="label">回复时间：</span>
              <span>{{ currentFeedback.replyTime }}</span>
            </div>
            <div class="detail-item">
              <span class="label">回复内容：</span>
              <div class="content">{{ currentFeedback.reply }}</div>
            </div>
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getAllFeedbacksService, replyFeedbackService, deleteFeedbackService } from '@/api/feedback'

// 留言列表
const feedbackList = ref([])
const loading = ref(false)

// 回复对话框
const replyDialogVisible = ref(false)
const replyFormRef = ref(null)
const replyForm = ref({
  reply: ''
})
const replyRules = {
  reply: [
    { required: true, message: '请输入回复内容', trigger: 'blur' },
    { min: 2, max: 500, message: '回复内容长度应在 2 到 500 个字符之间', trigger: 'blur' }
  ]
}

// 详情对话框
const detailDialogVisible = ref(false)

// 当前操作的留言
const currentFeedback = ref({})
const submitting = ref(false)

// 获取所有留言
const fetchAllFeedbacks = async () => {
  try {
    loading.value = true
    const res = await getAllFeedbacksService()
    
    if (res.code === 0) {
      feedbackList.value = res.data
    } else {
      ElMessage.error(res.msg || '获取留言列表失败')
    }
  } catch (error) {
    console.error('获取留言列表失败:', error)
    ElMessage.error('获取留言列表失败，请稍后再试')
  } finally {
    loading.value = false
  }
}

// 显示回复对话框
const showReplyDialog = (feedback) => {
  currentFeedback.value = feedback
  replyForm.value.reply = ''
  replyDialogVisible.value = true
}

// 查看留言详情
const viewFeedbackDetail = (feedback) => {
  currentFeedback.value = feedback
  detailDialogVisible.value = true
}

// 提交回复
const submitReply = () => {
  replyFormRef.value.validate(async (valid) => {
    if (!valid) return
    
    try {
      submitting.value = true
      const res = await replyFeedbackService(currentFeedback.value.id, replyForm.value)
      
      if (res.code === 0) {
        ElMessage.success('回复成功')
        replyDialogVisible.value = false
        // 刷新列表
        fetchAllFeedbacks()
      } else {
        ElMessage.error(res.msg || '回复失败')
      }
    } catch (error) {
      console.error('回复失败:', error)
      ElMessage.error('回复失败，请稍后再试')
    } finally {
      submitting.value = false
    }
  })
}

// 删除留言
const deleteFeedback = async (id) => {
  try {
    const res = await deleteFeedbackService(id)
    
    if (res.code === 0) {
      ElMessage.success('删除成功')
      // 刷新列表
      fetchAllFeedbacks()
    } else {
      ElMessage.error(res.msg || '删除失败')
    }
  } catch (error) {
    console.error('删除失败:', error)
    ElMessage.error('删除失败，请稍后再试')
  }
}

// 组件挂载时获取留言列表
onMounted(() => {
  fetchAllFeedbacks()
})
</script>

<style scoped>
.feedback-manage-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  font-size: 22px;
  color: #303133;
}

.feedback-detail {
  margin-bottom: 20px;
}

.detail-item {
  margin-bottom: 12px;
}

.label {
  font-weight: bold;
  color: #606266;
  margin-right: 8px;
}

.content {
  background-color: #f5f7fa;
  padding: 10px;
  border-radius: 4px;
  margin-top: 8px;
  white-space: pre-wrap;
  line-height: 1.5;
}

.reply-section {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px dashed #dcdfe6;
}

.reply-section h4 {
  margin: 0 0 15px 0;
  color: #409EFF;
}
</style> 